<template>
  <div class="user">
    <div style="position: relative;width:100%;height:50px;">
      <van-nav-bar
        fixed
        title="我的"
      />
    </div>
    <div class="header">
      <div class="user-card" v-if="token=='-1'">
        <img class="user-img" src="../../../assets/tx1.png" alt="">
        <p class="welcome">恭候您多时~</p>
        <div class="goLogin" @click="loginClick">去登录<van-icon class="icon-right" name="arrow" /></div>
      </div>
      <div class="user-card" v-if="token!='-1'">
        <img class="user-img" src="../../../assets/tx1.png" alt="">
        <p class="welcome">您好，{{userName}}</p>
      </div>
    </div>
    <van-cell-group class="list">
      <van-cell class="text-left" title="关于我们" value="" icon="user-circle-o" is-link  @click="aboutClick">
        <img
          class="user-icon"
          slot="icon"
          slot-scope="props"
          src="../../../assets/icon-my-normal.png"
        ></van-cell>
      <van-cell class="text-left" title="在线客服" value="" icon="service" is-link @click="serviceClick">
        <van-icon slot="icon"  class-prefix="my-icon" name="kefu" />
      </van-cell>
      <van-cell class="text-left" title="当前版本" value="V1.0.0" icon="info-o" is-link />
    </van-cell-group>
  </div>
</template>

<script>
import {Icon, Cell, CellGroup,Toast,NavBar} from 'vant'
export default {
  components:{
    [Icon.name]:Icon,
    [Cell.name]:Cell,
    [CellGroup.name]:CellGroup,
    [Toast.name]:Toast,
    [NavBar.name]:NavBar,
  },
  data(){
    return{
      token:'',
      info:'',
      userName:'',
    }
  },
  mounted(){
    _hmt.push(['_trackPageview', '/User']);
    this.$util.goBack();

    let _this = this;
    this.$util.getUser().then(token=>{
      console.log(token)
       this.token=token;
      if(token!='-1'){
        this.myInfo(token);
      }
    })
  },
  methods:{
    // 登录
    loginClick(){
      this.$util.url('/login','登录')
    },
    // 关于我们
    aboutClick(){
      if(this.token=='-1'){
        this.$util.url('/login','登录')
      }else{
        this.$util.url('/about','关于我们')
      }
    },
    serviceClick(){
      if(this.token=='-1'){
        this.$util.url('/login','登录')
      }else{
        this.$util.nativeHeader('http://p.qiao.baidu.com/cps/chat?siteId=12963462&userId=26937650&cp=daxiongdaikuan.com&cr=daxiongdaikuan.com&cw=daxiongdaikuan.com','在线客服')
      }
      // window.location.href='http://p.qiao.baidu.com/cps/chat?siteId=12963462&userId=26937650&cp=daxiongdaikuan.com&cr=daxiongdaikuan.com&cw=daxiongdaikuan.com';
      // window.location.href ='

    },
    myInfo(token){
      let _this = this;
      this.$api.post('/user/v1/info',{},s=>{
        console.log(s);
        _this.info = s.module;
        if(s.module.realName){
          let name = s.module.realName;
          if(s.module.sex == '男'){
            _this.userName = name.substr(0, 1)+'先生';
          }else if(s.module.sex == '女'){
            _this.userName = name.substr(0, 1)+'女士';
          }else{
            let phone = s.module.phone;
            _this.userName = phone.substr(0, 3) + '****' + phone.substr(7);
          }
        }else{
          let phone = s.module.phone;
          _this.userName = phone.substr(0, 3) + '****' + phone.substr(7);
        }


      },f=>{
        if(f.resultCode=='10000'||f.resultCode=='10003'||f.resultCode=='10001'||f.resultCode=='10002'){
          _this.$util.setSaveVlues('token','-1')
          _this.token='-1';
        }else{
          Toast(f.errorMessage);
        }
      },{
        'Accept': 'application/json',
        'channelCode':this.$util.channelCode,
        'version':this.$util.version,
        'token':token
      })
    }
  }
}
</script>

<style scoped lang="scss">
  /***
  * 产品主题颜色需求
  * #FF8024 按钮 突出文字 ico
  * #FFD500 B辅助色
  * #FFEC9C c辅助色
  * #1D0F00 重要文字
  * #41424E 副标题段落
  * #797A79 次要文字
  * #A9AAA9 不可点击
  * #E6E6E6 分割线 描边
  * #F6F7F6 背景
  * #6699CC 链接
  */
.user{
  overflow: hidden;
  width: 100%;
  height:100%;
  background: #F6F7F6;;
}
.header{
  width:500px;
  // width:500px;
  height:234px;
  margin-left:-70.5px;
  // margin-left:-82.5px;
  background: #555162;
  border-radius: 0 0 328px 328px;
}
.user-card{
  // display: none;

  display:flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top:110px;
  left:50%;
  width:343px;
  height:180px;
  margin-left:-171px;
  border-radius: 8px;
  box-shadow: 0 3px 12px 0 rgba(0,0,0,0.10);
  background:#FF8024;
}
.user-img{
  width:64px;
  height:64px;
  margin-top:28px;
}
.welcome{
  font-size:14px;
  line-height:20px;
  margin-top:20px;
  color:#fff;
}
.goLogin{
  width:100%;
  // margin-top:5px;
  font-size:14px;
  line-height:34px;
  color:#fff;
}
.icon-right{
  position: relative;
  top:2px;
}
.list{
  margin-top:40px;
}
.user-icon{
  position: relative;
  top:2px;
  width:17px;
  height:17px;
  margin-right:4px;
}
</style>